<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 商城管理 <span class="c-gray en">&gt;</span> 商品分类<span class="c-gray en">&gt;</span>商品分类明细管理<span class="c-gray en">&gt;</span>商品分类明细编辑</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="page-container">
			<input type="hidden" id="classificationDetailId" v-model="content.id"/>
			<div class="form form-horizontal" id="form-admin-add">
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>分类名称：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="classificationDetailName" v-model="content.classificationDetailName">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>ICON：</label>
					<div class="formControls col-xs-8 col-sm-9">
            <div><img src="{{content.classificationDetailIcon}}" width="80" height="80" id="classificationIconShow" style="border:1px solid #ccc;margin:10px;" accept="image/*"/></div>
						<input type="file" class="input-text" onchange="checkField($('#classificationIconShow'),$('#classificationDetailIcon'),this.files[0])">
            <input type="hidden" id="classificationDetailIcon" value="http://p3cxjq83j.bkt.clouddn.com/pic_not_found.png" v-model="content.classificationDetailIcon"/>
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>排列顺序：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="classificationDetailOrder" v-model="content.classificationDetailOrder">
					</div>
				</div>
        <div class="row cl">
					<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<table class="table table-border table-bordered table-bg" id="attrs">
              <thead>
                <tr class="text-c">
                  <th>属性类别</th>
                  <th>名称</th>
                  <th><a v-on:click="addAttr()" style="cursor:pointer"><i class="Hui-iconfont">&#xe60c;</i>添加属性</a></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
					</div>
				</div>
				<div class="row cl">
					<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
						<input class="btn btn-primary" type="button" v-on:click="saveData()" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" style="margin-right:30px;">
						<input class="btn" type="button" onclick="javascript:history.go(-1)" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
					</div>
				</div>
			</div>
		</article>
	</div>
	<script>
    var attrIndex = 1;

    function deleteAttr(index){
        $("#attrs .tr_"+index).remove();
    }

    new Vue({
        el:'#sectionContent',
        http: authorization(),
				data:{
						content:{}
				},
				created:function(){
						this.$http.get('/restful/shopping/v1.0/classification/detail/'+getQueryString('id')).then((response) => {
								this.content = responseObj(response).data;
								responseObj(response).data.attributes.forEach(function(attr){
										var details = "";
										attr.attributes.forEach(function(attrDetail){
											details += attrDetail.name+"、";
										});

										var str = '<tr class="tr_'+attrIndex+'">                                                                                                                       ';
		                str += '	<td>                                                                                                                      ';
		                str += '	  <input type="text" class="input-text" placeholder="类别名称" value='+attr.attributeType+'>                                                           ';
		                str += '	</td>                                                                                                                     ';
		                str += '	<td>                                                                                                                      ';
		                str += '	  <input type="text" class="input-text" placeholder="用顿号分割[、]" value='+details+'>                                                     ';
		                str += '	</td>                                                                                                                     ';
		                str += '	<td>                                                                                                                      ';
		                str += '				<a onclick="deleteAttr('+attrIndex+')" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除属性</a>  ';
		                str += '	</td>                                                                                                                     ';
		                str += '</tr>                                                                                                                         ';
		                $("#attrs").append(str);
		                attrIndex ++;
								});


						}).catch(function(response) {
								alert(errorMsg(response));
						});
				},
        methods:{
            addAttr:function(){
                var str = '<tr class="tr_'+attrIndex+'">                                                                                                                       ';
                str += '	<td>                                                                                                                      ';
                str += '	  <input type="text" class="input-text" placeholder="类别名称">                                                           ';
                str += '	</td>                                                                                                                     ';
                str += '	<td>                                                                                                                      ';
                str += '	  <input type="text" class="input-text" placeholder="用顿号分割[、]">                                                     ';
                str += '	</td>                                                                                                                     ';
                str += '	<td>                                                                                                                      ';
                str += '				<a onclick="deleteAttr('+attrIndex+')" style="cursor:pointer"><i class="Hui-iconfont">&#xe6e2;</i>删除属性</a>  ';
                str += '	</td>                                                                                                                     ';
                str += '</tr>                                                                                                                         ';
                $("#attrs").append(str);
                attrIndex ++;
            },
            backToList:function(){
                window.parent.location.href="#!view/shopping/classification/details/classification-detail-list.html?cId="+getQueryString('cId');
            },
            saveData:function(){
                var attrsVal = [];
                $("#attrs tr:not(:first)").each(function(){
                     var items = $("input",this);
                     console.log('key='+$(items[0]).val());
                     console.log('value='+$(items[1]).val());

                     var attrNames = [];
                     $(items[1]).val().split("、").forEach(function(item){
                        if(item.length != 0){
                          var obj = {
                            name:item
                          }
                          attrNames.push(obj);
                        }
                     });

                     if(attrNames.length >0 ){
                       var attr = {
                          attributeType:$(items[0]).val(),
                          attributes:attrNames
                       };
                       attrsVal.push(attr);
                     }
                });

                console.log('-------->'+JSON.stringify(attrsVal));
                var formData = {
                    classificationId:getQueryString('cId'),
                    classificationDetailName:$('#classificationDetailName').val(),
                    classificationDetailIcon:$('#classificationDetailIcon').val(),
                    classificationDetailOrder:$('#classificationDetailOrder').val(),
                    attributes:attrsVal
                };
                this.$http.put('/restful/shopping/v1.0/classification/detail/'+getQueryString('id'),formData).then((response) => {
                    this.backToList();
                }).catch(function(response) {
                    alert(errorMsg(response));
                });


            }
        }
    });
</script>
